<template>
    <div class="layout-container">
        <el-container class="box" v-if="routeName!=='login'&&routeName!==null">
            <el-aside class="menu" :width="collapse ? '64px' : '210px'">
                <sidebar :collapse="collapse" />
            </el-aside>
            <el-container>
                <el-header>
                    <chf-header v-model="collapse" />
                    <TagsView />
                </el-header>
                <el-main>
                    <transition name="fade-transform" mode="out-in">
                        <slot></slot>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
        <slot v-else></slot>
    </div>
</template>

<script>
import sidebar from "./components/sidebar/index.vue";
import TagsView from "./components/TagsView/index.vue";
import chfHeader from "./components/chf-header.vue";

export default {
    name: "Layout",
    data () {
        return {
            collapse: false,
        };
    },
    computed: {
        routeName () {
            return this.$route.name;
        },
    },
    components: { sidebar, chfHeader, TagsView },
};
</script>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;
    .box {
        height: 100vh;
    }
    .menu {
        transition: 0.5s;
        overflow: hidden;
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-right: 1px solid var(--color-text-4);
    }
    .el-header {
        height: 90px !important;
        background: var(--color-bg-1);
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid var(--color-text-4);
    }
    .el-main {
        // background: var(--color-bg-1);
        background: white;
        overflow-x: hidden;
        // background: #222020;
    }
}
</style>
